<template>
	<div>
		<el-container>
			<el-header class="header">
			</el-header>
			<el-main>
				<el-tabs class="demo-tabs">
					<el-tab-pane label="合同">
						<el-table :row-class-name="tableRowClassName" :data="contracts" stripe style="width: 100%" @row-dblclick="test">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="创建人" />
							<el-table-column prop="contractType" label="合同类型" />
							<el-table-column prop="contractAparty" label="甲方" />
							<el-table-column prop="contractBparty" label="乙方" />
							<el-table-column prop="stepProcessor" label="待审批人" />
							<el-table-column prop="stepIsend" label="审批完成" />
							<!-- 表格下面分页区域 -->
							<el-pagination small layout="total,prev,pager,next,jumper" :total="steps.length" :page-size="pagesize"
							 pager-count="3" :current-page="currentPage" @current-change="handleCurrentChange" @size-change="handleSizeChange"></el-pagination>
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="费用">
						<el-table :data="fees" stripe style="width: 100%">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="创建人" />
							<el-table-column prop="feeKind" label="费用种类" />
							<el-table-column prop="feeCost" label="金额" />
							<el-table-column prop="stepProcessor" label="待审批人" />
							<el-table-column prop="stepIsend" label="审批完成" />
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="考勤">
						<el-table :data="abs" stripe style="width: 100%">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="attendType" label="申请类型" />
							<el-table-column prop="stepProcessor" label="待审批人" />
							<el-table-column prop="stepIsend" label="审批完成" />
						</el-table>
					</el-tab-pane>

					<el-tab-pane label="人事变更">
						<el-table :data="perman" stripe style="width: 100%">
							<el-table-column prop="stepTitle" label="流程简介" />
							<el-table-column prop="creatorName" label="发起人" />
							<el-table-column prop="permanageDepartment" label="调动后部门" />
							<el-table-column prop="permanageTransfer" label="调动后岗位" />
							<el-table-column prop="permanageSalary" label="调动后薪资" />
							<el-table-column prop="stepProcessor" label="待审批人" />
							<el-table-column prop="stepIsend" label="审批完成" />
						</el-table>
					</el-tab-pane>
				</el-tabs>
			</el-main>
		</el-container>
	</div>
	<!-- 合同弹窗 -->
</template>

<script>
	import qs from 'qs'
	export default {
		data() {
			return {
				steps: [],
				fees: [],
				contracts: [],
				abs: [],
				perman: [],
				step: {
					creatorId: this.$store.state.user.userId,
					creatorName: this.$store.state.user.userName,
				},
				fee: {

				},
				index: null,
				pagesize: 2, // 一页有多少条数据
				currentPage: 1, //当前的页数
				dialogVisible: false,
			}
		},
		methods: {
			feeget() {
				let that = this
				that.step.stepKind = '费用申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.fees = res.data
					console.log(that.fees);
				})
			},
			contraget() {
				let that = this
				that.step.stepKind = '合同申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.contracts = res.data
					console.log(that.contracts);
				})
			},
			absget() {
				let that = this
				that.step.stepKind = '考勤申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.abs = res.data
					console.log(res);
				})
			},
			permanget() {
				let that = this
				that.step.stepKind = '人事变更申请'
				let str = qs.stringify(that.step)
				console.log(this.step)
				this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
					that.perman = res.data
					console.log(res);
				})
			},
			handleEdit(number, fee) {
				console.log(number, fee)
			},
			// 每页显示的条数
			handleSizeChange(val) {
				// 改变每页显示的条数 
				this.pagesize = val
				// 注意：在改变每页显示的条数时，要将页码显示到第一页
				this.currentPage = 1
			},
			// 显示第几页
			handleCurrentChange(val) {
				// 改变默认的页数
				this.currentPage = val
			},
			test(row) {
				let that = this
				console.log(row.index)
				that.index = row.index
				that.dialogVisible = true
			},
			tableRowClassName({
				row,
				rowIndex
			}) {
				row.index = rowIndex;
			}

		},
		created() {
			let that = this
			let str = qs.stringify(that.step)
			this.$axios.get("http://localhost:8080/step/search?" + str).then(function(res) {
				that.steps = res.data
				console.log(res);
			})
			this.feeget()
			this.contraget()
			this.absget()
			this.permanget()
		},
		// computed: {
		//     stepOpinions: function() {
		//       return this.fees[this.index].stepOpinions
		//     }
		//   }
	}
</script>

<style>
	.el-header.header {
		background-color: white;
		margin: auto;
	}

	.el-main {
		background-color: #FFFFFF;
	}

	.demo-tabs>.el-tabs__content {
		padding: 32px;
		color: #6b778c;
		font-size: 12px;
		font-weight: 600;
	}
</style>
